/**
 * Created by Administrator on 2017/5/12.
 */
/**
 * Created by Administrator on 2017/4/25.
 */
import rt from 'angular-ui-router';
import html from './index.html';
import * as d3 from 'd3';
export default angular.module('husband.db',[rt])
.config(['$stateProvider', function ($stateProvider) {
  $stateProvider.state('husband.dbPic', {
    url: '/dbPic',
    template:html,
    data:{"id":20 }
  });
}])
.controller('dbController',["$scope","$http",function ($scope,$http,$stateParams) {
  $scope.title = 'db';
  var url = location.href;var pageParams = {};
  if(url.indexOf('?')) url = url.split('?')[1];
  if(url && url.indexOf('='))pageParams.id = url.split('=')[1];
  console.log(pageParams.id);


  var contentPath = 'http://192.168.1.108:8080/mmdb2/';
  var allCi = {};
  var rlt = null;
  var rectR = 1000,rectP = 30,isTop = 180,circlePadding = 200;
  var pad,padTransfrom;
  var isDrawLine = false;
  var topArr = [], bottomArr = [];
  var nameType = '名称';
  var category = '应用服务';   //放在头部写死的内容
  var httpObj = {
      "nodes":{
        "app":{
          "exp":{
            "id":"5B22E5BA94E794A8222C2265623839366261642D303936622D343264302D396131342D623965646166643435666163225D"
          }
        },
        "unit":{
          "exp":{
            "category":"部署单元"
          },
          "ret":true
        },
        "appService":{
          "exp":{
            "category":{"$in":["应用服务","共享存储服务节点","数据库服务节点"]}
          },
          "ret":true
        }
      },
      "edges":{
        "l1":{
          "sourceNode":"app",
          "destNode":"unit",
          "LowLevel":2,
          "HighLevel":2
        },
        "l2":{
          "sourceNode":"unit",
          "destNode":"appService",
          "LowLevel":1,
          "HighLevel":1
        }
      }
    };
  if(pageParams.id){httpObj.nodes.app.exp.id = pageParams.id};
  httpObj.nodes.app.exp.id = '5B22E5BA94E794A8222C2230306261626532382D396462332D346361372D613731322D316138316331643836393532225D';
  //创建svg元素
  function createSvg() {
    //将画布中的内容进行绘制
    pad = d3.select('.svgContainer')
    .append('svg')
    .style('position','relative')
    .attr('width','100%')
    .attr('height','100%')
    .append('g')
    .attr('class','allContainer')
    ;
    padTransfrom = d3.zoom().on('zoom',function(){ pad.attr('transform', d3.event.transform)});
    d3.select('svg').call(padTransfrom).on('click',filterOver);
    var arrowMarker = pad.append("marker")
    .attr("id","arrow")
    .attr("markerUnits","strokeWidth")
    .attr("markerWidth",12)
    .attr("markerHeight",12)
    .attr("viewBox","0 0 24 24")
    .attr("refX",0)
    .attr("refY",12)
    .attr("orient","auto")
    ;
    var arrow_path = "M0,0 L0,24 L12,12 Z";
    // 定义箭头
    arrowMarker.append("path")
    .attr("d",arrow_path)
    .attr("fill","grey")
    ;
  }
  createSvg();


  /* ------------------------------开始请求进行所有数据处理------------------------------------------*/
  var httpobjs = {
    jsonId : httpObj.nodes.app.exp.id
  };
  $http.post('mmdb2/rest/hengfeng/ring6',httpobjs).then(function (data) {
    console.log(data);
  });

  $http.post('mongraph/getActor',httpObj).then(function (data) {
    getAllRlts(data.data.nodes);
  });
  //获取所有的关系数据
  function getAllRlts(nodes) {
    var objs = {
          cis:[]
    };

    for(var i in nodes) {
      if(i == 'unit'){
        $scope.selectData = nodes[i];
      }else {
        for(var x = 0 ; x < nodes[i].length; x++ ){
          if(nodes[i][x].attrMap.category == category) {
            topArr.push(nodes[i][x]);
          }else {
            var obj = {};
            bottomArr.push(nodes[i][x]);
          }
        }
        if(topArr.length){
            drawRect(topArr);
            isTop = 180;
        }
        drawRect(bottomArr,isTop);
      }
      for(var x = 0 ; x < nodes[i].length; x++ ){
        nodes[i][x].data =  nodes[i][x].attrMap;
        objs.cis.push(nodes[i][x].id);
        allCi[nodes[i][x].id] = nodes[i][x];
      }
    }
    $http.post('mmdb2/rest/cirel/query',objs).then(function (data) {
      rlt = data.data;
      nodeAndLine();
    });
  }

  //将所有的node和线处理
  function nodeAndLine() {
    //线的处理
    for(var i = 0 ; i <rlt.length;i++) {
      rlt[i].source = allCi[rlt[i].startCi];
      rlt[i].target = allCi[rlt[i].endCi];
      if(!rlt[i].source ||  !rlt[i].target){
        console.log('error:关系线对应数据错误');
      }
      else {
        if( !rlt[i].target.sourceNode){
          rlt[i].target.sourceNode= {};
        }
        if( !rlt[i].source.targetNode){
          rlt[i].source.targetNode= {};
        }
        rlt[i].target.sourceNode[rlt[i].source.id] = 1;
        rlt[i].source.targetNode[rlt[i].target.id] = 1;
        rlt[i].target.num ? rlt[i].target.num++ : (rlt[i].target.num = 1);
      }
    }
  }


  //处理所有的node数据



  //判断线的位置是否在node集合中
  function isInNodes (line,nodes) {
    var tflag = false;
    var sflag = false;
    line.order = 0;
    for(var i = 0 ; i < nodes.length; i ++){
      if(line.startCi == nodes[i].id) {
        tflag = true
      }else if(line.endCi == nodes[i].id){
        sflag = true
      };
      if(tflag && sflag) {
        line.order = 1;
        return true
      }
    }
    return false
  }




  //加入所有的图片
  function appendImage(d) {
    var imgCon = d3.select('g.allContainer')
    .append('pattern')
    .attr('id',d.node[0].categoryId)
    .attr('width',"100%")
    .attr('height',"100%")
    .attr('patternContentUnits','objectBoundingBox')
    ;
    imgCon.append('image')
    .attr('xlink:href',contentPath+d.node[0].icon)
    .attr('width',1)
    .attr('height',1)
    .attr('x',0)
    .attr('y',0)
    ;
  }






  //过滤节点
  function filterNode(sels) {
    var sel = sels.datum();
    d3.selectAll('.nodeG').classed('opacity',true);
    d3.selectAll('.lineG').classed('opacity',true).classed('displayLine',false);
    sels.classed('opacity',false);
    if(!sel.sourceNode && !sel.targetNode){
      console.log('error:节点没有关系');
      return
    }
    d3.selectAll('.nodeG').each(function (d) {
      if(sel.targetNode && sel.targetNode[d.id]) {
        d3.select(this).classed('opacity',false);
      }else if(sel.sourceNode && sel.sourceNode[d.id]) {
        d3.select(this).classed('opacity',false);
      }
    });
    d3.selectAll('.lineG').each(function (d) {
      if(d.source.id == sel.id || d.target.id == sel.id){
        d3.select(this).classed('opacity',false).classed('displayLine',true);
      }
    });

  }

  //回复节点
  function filterOver() {
    d3.selectAll('.opacity')
    .classed('opacity',false);
    d3.selectAll('.displayLine').classed('displayLine',false);
  }


  //力学图绘制
  function forceDraw(className,obj) {
    padTransfrom.transform(d3.select('svg'),d3.zoomIdentity);
    var graph = pad.append('g')
    .datum(obj)
    .attr('class','forcePad')
    .classed(className,true)
    ;
    graph.append('text')
    .text(obj.name || '无')
    .attr('font-size','0.1em')
    .attr('transform','translate('+obj.x+","+ (obj.y+ 20) +')')
    ;


    graph.append('rect').attr('x',function (d) {
      return d.x
    }).attr('y',function (d) {
      return d.y
    })
    .attr('width',rectR - rectP)
    .attr('height',rectR- rectP)
    .attr('fill','none')
    .attr('stroke','#fff')
    ;
    for(var i = 0 ; i < obj.nodes.length; i ++) {
      obj.nodes[i].fx = undefined;
      obj.nodes[i].fy = undefined;
      obj.nodes[i].x = undefined;
      obj.nodes[i].y = undefined;
      obj.nodes[i].vx = undefined;
      obj.nodes[i].vy = undefined;
    }


    var force = objs.draw()(graph);
    var r = (rectR-rectP)/2;
    force.lineLength(100).size([2*r,2*r]).center([obj.x+ r,obj.y+r]).start( obj.nodes,obj.lines);


  }/*-----forceDraw--------*/

  //剩余连线的绘制
  function drawDline(pad) {
    var arr = [];
    for(var i = 0 ; i < rlt.length; i ++) {
      if(!rlt[i].order){
        arr.push(rlt[i])
      }
    }
    pad.selectAll('g.areaLine').remove();
    pad.selectAll('g.areaLine')
    .data(arr)
    .enter()
    .insert('g','g.otherContainer')
    .attr('class','areaLine')
    .classed('lineG',true)
    .append('path')
    .classed('linePath',true)
    .attr('stroke','#fff')
    .attr("marker-end","url(#arrow)")
    .attr('fill','none')
    ;
    isDrawLine = true;
  }/*-----drawDline--------*/

  //更新连线
  function  updateLine() {
    if(!isDrawLine)return;
    d3.selectAll('path.linePath').each(function () {
      d3.select(this).attr('d',function (d) {
        var dx = d.target.x - d.source.x,
        dy = d.target.y - d.source.y,
        dr = Math.sqrt(dx * dx + dy * dy);
        if(!dr){
          return 'M 0 0 L 0 0'
        }
        return ['M', d.source.x + d.source.r * dx / dr , d.source.y + d.source.r * dy / dr ,
          'L', d.target.x - (d.target.r + 4) * dx / dr , d.target.y - (d.target.r + 4) * dy / dr].join(' ');
      })
    });
  }/*-----drawDline--------*/


  //力学图对象
  var objs = {};
  objs.draw = function () {
    var pad = null;
    var graph = null;
    var lineLength = 20;
    var lines = null,force = null,r = 10;
    var centerX = 0,centerY = 0,width=0,height=0;
    function _force(contain) {
      pad = contain ? contain : d3.select('svg');
      _force.init();
      graph = pad;
      return _force;
    }
    /*一些初始化的东西*/
    _force.init = function () {
      // var arrowMarker = pad.append("marker")
      // .attr("id","arrow")
      // .attr("markerUnits","strokeWidth")
      // .attr("markerWidth",12)
      // .attr("markerHeight",12)
      // .attr("viewBox","0 0 24 24")
      // .attr("refX",0)
      // .attr("refY",12)
      // .attr("orient","auto")
      // ;
      // var arrow_path = "M0,0 L0,24 L12,12 Z";
      // // 定义箭头
      // arrowMarker.append("path")
      // .attr("d",arrow_path)
      // .attr("fill","grey")
      // ;
    };
    /*
     * 进行绘制的容器缩放事件（参数：d3元素）
     *

     /*
     * 绘制线的距离改变
     * */
    _force.lineLength = function (length) {
      lineLength = length;
      return this
    };
    _force.changeR = function (nodeR) {
      r = nodeR;
      return this
    };
    /*
     * 绘制的区域参数（[宽,高]）
     * */
    _force.size = function (arr) {
      width = arr[0];
      height = arr[1];
      return this
    };
    /*
     * 绘制的区域坐标（[x,y]）
     * */
    _force.center = function (arr) {
      centerX = arr[0];
      centerY = arr[1];
      return this
    };

    /*
     * 进行线数据的处理(进行传入所有的lines数据)
     * */
    _force.lines = function (lineData) {
      lines = d3.forceLink(lineData)
      .id(function (d) {
        return d.id
      })
      .distance(function (d) {
        return lineLength + d.target.num * 5;
      })
      .strength(0.01)
      ;
      _force.drawLines(lineData);
    };
    /*
     * 进行线数据的处理(进行传入所有的nodes的数据)
     * */
    _force.nodes = function (nodeData) {
      var maxZone;
      if(width > height){
        maxZone = height
      }else {
        maxZone = width
      }
      force = d3.forceSimulation(nodeData)
      .force("link", lines)
      .force("charge", d3.forceManyBody().strength(-300).theta(1).distanceMax(maxZone/2))
      .force("center", d3.forceCenter(centerX, centerY))
      ;
      force.alpha(0.1).alphaTarget(0.1).velocityDecay(0.1);
      _force.drawNodes(nodeData);
      force.on('tick',function () {
        var maxX = centerX + maxZone/2;
        var minX = centerX - maxZone/2;
        var maxY = centerY + maxZone/2;
        var minY = centerY - maxZone/2;
        console.log(maxZone +'&&'+maxY +"&&"+minY+"&&"+centerY);
        graph.selectAll('.nodeG').attr('transform',function (d) {
          if(d.x > maxX){
            d.x = maxX
          }else if(d.x < minX) {
            d.x = minX
          }
          if(d.y > maxY){
            d.y = maxY
          }else if(d.x < minY) {
            d.y = minY
          };

          return 'translate(' + d.x + ',' + d.y + ')';
        })
        ;
        _force.updateLine();
      });
    };


    /*
     * 更新连线
     * */
    _force.updateLine = function (sel) {
      updateLine();
      if(!sel){
        graph.selectAll('.force_line').attr('d',function (d) {
          var dx = d.target.x - d.source.x,
          dy = d.target.y - d.source.y,
          dr = Math.sqrt(dx * dx + dy * dy);
          return ['M', d.source.x + d.source.r * dx / dr , d.source.y + d.source.r * dy / dr ,
            'L', d.target.x - (d.target.r + 4) * dx / dr , d.target.y - (d.target.r + 4) * dy / dr].join(' ');
        });
        force.alphaTarget(0);
      }else {
        sel.attr('d',function (d) {
          var dx = d.target.x - d.source.x,
          dy = d.target.y - d.source.y,
          dr = Math.sqrt(dx * dx + dy * dy);
          return ['M', d.source.x + d.source.r * dx / dr , d.source.y + d.source.r * dy / dr ,
            'L', d.target.x - (d.target.r + 4) * dx / dr , d.target.y - (d.target.r + 4) * dy / dr].join(' ');
        });
      }

    };

    /*
     * 过滤连线并更新
     * */
    _force.filterLine = function (id) {
      var line = graph.selectAll('.force_line').filter(function (d) {
        return (d.target.id == id || d.source.id == id)
      });
      return line;
    };
    /*
     * 进行绘图
     * */
    _force.drawLines = function (lines) {
      var ele = graph.selectAll('g.lineG').data(lines).enter().append('g').attr('class','lineG');
      ele.append('path').attr('class','force_line').classed('linePath',true).attr('stroke','#fff').attr("marker-end","url(#arrow)").attr('fill','none');
    };
    _force.drawNodes = function (nodes) {
      function dragstart(d) {
        if (!d3.event.active) force.stop();
        if(!d.fx){
          d.fx = d.x;   d.fy = d.y;
        }
      }
      function dragging(d) {
        d.x += d3.event.dx;d.y += d3.event.dy;
        d.fx += d3.event.dx;  d.fy += d3.event.dy;
        d3.select(this).attr('transform',function () {
          return 'translate('+ d.fx +','+ d.fy +')';
        });
        var sel = _force.filterLine(d.id);
        _force.updateLine(sel);
      }
      function dragged(d) {
        // if (!d3.event.active) force.alphaTarget(0);
        // d.fx = d3.event.x;  d.fy = d3.event.y;
      };
      var dragEvent = d3.drag().on('start',dragstart).on('drag',dragging).on('end',dragged);
      var ele = graph.selectAll('g.nodeG').data(nodes).enter().append('g').attr('class','nodeG');
      //添加球
      ele.append('rect')
      .attr('class','force_circle')
      .attr('x',function (d) {
        var name = d.data.category + nameType;
        if (!d.name)d.name = d.data[name];
        if(d.num){
          d.r = d.num * 2 +  r;
        }else {
          d.r = r;
        }
        return -d.r* Math.sqrt(0.5)
      })
      .attr('y',function (d) {
        return -d.r* Math.sqrt(0.5)
      })
      .attr('height',function (d) {
        return 2*d.r* Math.sqrt(0.5)
      })
      .attr('width',function (d) {
        return 2*d.r* Math.sqrt(0.5)

      })
      .attr('fill',function (d) {
        return d.classColor || '#3fa8df'
      })
      .style('opacity',0)
      ;

      ele.append('image')
      .attr('class','background')
      .attr('xlink:href',function (d) {
        return contentPath + d.icon
      })
      .attr('width',function (d) {
        return 2*d.r* Math.sqrt(0.5)
      })
      .attr('height',function (d) {
        return 2*d.r* Math.sqrt(0.5)
      })
      .attr('transform',function (d) {
        return "translate("+  (-d.r* Math.sqrt(0.5)) + ", "+ (-d.r* Math.sqrt(0.5)) +")"
      })
      ;
      ele.each(function (d) {
        if(d.name && d.name.length) {
          var end = Math.floor(d.name.length / 8) + 1;
          for (var i = 0; i < end; i++) {
            d3.select(this).append('text')
            .text(d.name.slice((8 * i), (8 + 8 * i)))
            .attr('font-size', '0.1em')
            .attr('text-anchor','middle')
            .attr('transform', 'translate(0, ' + (d.r + 20 * i) + ')')
            ;
          }
        }
      });
      ele.append('title').text(function (d) {
        return d.name
      });
      ele.on('mouseenter',function () {
        // filterNode(d3.select(this));
      })
      .on('mouseleave',function () {
        // filterOver();
      });
      ele.call(dragEvent);
    };

    /*
     * 进行数据的处理(进行传入所有的lines数据,还有线的长度)
     * */
    _force.start = function (nodeData,lineData) {
      _force.init();
      _force.lines(lineData);
      _force.nodes(nodeData);
      setTimeout(_force.end,5000);
    };
    /*
     * 进行force终止
     */
    _force.end = function () {
      force.stop();
      return _force;
    };

    return _force
  };/*-----力学图对象--------*/

// selectDate的分类
  function sperateSel(type) {

    var obj = {};
    var num = 0;
    isDrawLine = false;
    var x = $scope.selectData;
    for(var i = 0; i <x.length;i++) {
      if(!obj[x[i].data[type]]){
        obj[x[i].data[type]] = {};
        obj[x[i].data[type]].name = x[i].data[type];
        obj[x[i].data[type]].nodes = [];
        obj[x[i].data[type]].lines= [];
        obj[x[i].data[type]].x = num * rectR;
        obj[x[i].data[type]].y = isTop;
        num++;
      }
      obj[x[i].data[type]].nodes.push(x[i]);
    }
    pad.selectAll('g.forcePad').remove();
    for(var i in obj) {
      for(var x = 0 ; x< rlt.length;x++ ) {
        if(isInNodes(rlt[x],obj[i].nodes))obj[i].lines.push(rlt[x]);
      }
      forceDraw(type,obj[i]);
    }
    updataRect(num * rectR);
    // 链接其余连线
    drawDline(pad);
    d3.selectAll('.nodeG').on('click',function (d) {
      filterNode(d3.select(this));
      d3.event.stopPropagation();
    });
  }


  //进行分类的矩形绘画
  function drawRect(arr,top) {
    if(!top)top = 0;
    var num = 0;
    var graph = d3.select('g.allContainer').append('g').attr('class','otherContainer').style('opacity',0);
    var dragEvent = d3.drag().on('drag',dragging);

   var gNodes = graph.selectAll('g.otherViewCircle')
      .data(arr)
      .enter()
      .append('g')
      .attr('class','otherViewCircle')
      .classed('bottomG',top)
      .classed('topG',!top)
      .classed('nodeG',true)
      .attr('transform',function (d,i) {
        d.data = d.attrMap;
        var name = d.data.category + nameType;
        if (!d.name)d.name = d.data[name];
        d.startX = circlePadding * (i + 1);
        d.topY  =0;
        if(top)d.topY = rectR+rectP+top;
        d.r = 50;
        return 'translate('+ circlePadding * (i+1) +" " + d.topY + ")";
      });
    gNodes.append('circle')
      .attr('class','otherCircle')
      .attr('r',40)
      .attr('fill','none')
    ;
    gNodes.append('image')
    .attr('class','background')
    .attr('xlink:href',function (d) {
      return contentPath + d.icon
    })
    .attr('width',function (d) {
      return 2*d.r* Math.sqrt(0.5)
    })
    .attr('height',function (d) {
      return 2*d.r* Math.sqrt(0.5)
    })
    .attr('transform',function (d) {
      return "translate("+  (-d.r* Math.sqrt(0.5)) + ", "+ (-d.r* Math.sqrt(0.5)) +")"
    })
    ;
    gNodes.each(function (d) {
      if(d.name && d.name.length) {
        var end = Math.floor(d.name.length / 8) + 1;
        for (var i = 0; i < end; i++) {
          d3.select(this).append('text')
          .text(d.name.slice((8 * i), (8 + 8 * i)))
          .attr('font-size', '0.1em')
          .attr('text-anchor','middle')
          .attr('transform', 'translate(0, ' + (45 + 20 * i) + ')')
          ;
        }
      }


    });
    gNodes.append('title').text(function (d) {
      return d.name
    });
    function dragging(d) {
      d.x += d3.event.dx;d.y += d3.event.dy;
      d3.select(this).attr('transform',function () {
        return 'translate('+ d.x +','+ d.y +')';
      });
      updateLine();
    };
    d3.selectAll('.otherViewCircle').call(dragEvent);

  }



  function updataRect(w) {
    var widthTop = (topArr.length + 0.5) * circlePadding;
    var widthBottom = (bottomArr.length + 0.5) * circlePadding;
    var  xMoveTop = (w - widthTop)/2;
    var  xMoveBottom = (w - widthBottom)/2;
    d3.selectAll('g.otherContainer').style('opacity',1);
    d3.selectAll('g.bottomG')
      .attr('transform',function (d) {
        d.x = d.startX + xMoveBottom;
        d.y = d.topY + 80;
        return 'translate('+ d.x +" " + d.y + ')';
      })
    ;
    d3.selectAll('g.topG')
    .attr('transform',function (d) {
      d.x = d.startX + xMoveTop;
      d.y = d.topY + 80;
      return 'translate('+ d.x +" " + d.y + ')';
    })
    ;
  }



$scope.typeChange = function(x) {
  sperateSel(x);

};









  // $http.get('api/dbCi1').then(function (data) {
  //   ci3 = data.data.data.datas;
  //   typeSeparate();
  // });
  // $http.get('api/dbCi2').then(function (data) {
  //   ci4 = data.data.data.datas;
  //   typeSeparate();
  // });
  // $http.get('api/dbCi3').then(function (data) {
  //   ci1 = data.data.data.datas;
  //   typeSeparate();
  // });
  // $http.get('api/gx').then(function (data) {
  //   ci2 = data.data.data.datas;
  //   typeSeparate();
  // });
  // $http.get('api/rltThree').then(function (data) {
  //   rlt = data.data.data;
  //   flagRlt = true;
  //   nodeAndLine();
  // });
  // //将所有的node进行分类
  // function typeSeparate() {
  //   if(ci1 && ci2 && ci3 && ci4){
  //     var obj = {};
  //     allCi = {};
  //     for(var i = 0; i < ci1.length;i++) {
  //       allCi[ci1[i].id] = ci1[i]
  //     }
  //     for(var i = 0; i < ci2.length;i++) {
  //       allCi[ci2[i].id] = ci2[i]
  //     }
  //     for(var i = 0; i < ci3.length;i++) {
  //       allCi[ci3[i].id] = ci3[i]
  //     }
  //     for(var i = 0; i < ci4.length;i++) {
  //       allCi[ci4[i].id] = ci4[i]
  //     }
  //     obj[ci1[0].categoryId] = {};
  //     obj[ci1[0].categoryId].name = ci1[0].categoryName;
  //     obj[ci1[0].categoryId].node = [];
  //     obj[ci2[0].categoryId] = {};
  //     obj[ci2[0].categoryId].name = ci2[0].categoryName;
  //     obj[ci2[0].categoryId].node = [];
  //     obj[ci3[0].categoryId] = {};
  //     obj[ci3[0].categoryId].name = ci3[0].categoryName;
  //     obj[ci3[0].categoryId].node = [];
  //     obj[ci4[0].categoryId] = {};
  //     obj[ci4[0].categoryId].name = ci4[0].categoryName;
  //     obj[ci4[0].categoryId].node = [];
  //     obj[ci1[0].categoryId].node=obj[ci1[0].categoryId].node.concat(ci1);
  //     obj[ci2[0].categoryId].node=obj[ci2[0].categoryId].node.concat(ci2);
  //     obj[ci3[0].categoryId].node=obj[ci3[0].categoryId].node.concat(ci3);
  //     obj[ci4[0].categoryId].node=obj[ci4[0].categoryId].node.concat(ci4);
  //     $scope.allCi = obj;
  //     $scope.selectData = $scope.allCi[type];
  //     bottomArr = [];
  //     topArr  = [];
  //     for(var x in $scope.allCi){
  //       appendImage($scope.allCi[x]);
  //       if(x == type) {
  //
  //       }else {
  //         if(x == type2) {
  //           isTop = 180;
  //           topArr = topArr.concat($scope.allCi[x].node);
  //         }else {
  //           bottomArr = bottomArr.concat($scope.allCi[x].node);
  //         }
  //       }
  //     };
  //     if(topArr.length){
  //       drawRect(topArr);
  //
  //     }
  //     drawRect(bottomArr,isTop);
  //
  //
  //     flagNode = true;
  //     nodeAndLine();
  //   }else {
  //     console.log('正在加载')
  //   }
  // }



}]);